<template>
    <div class="cm-bg-c">
        <el-row v-if="status === '0'">
            <el-col :span="12">
                <el-alert title="小额打款验证失败，银行开户信息有误，请重新输入！" type="warning" show-icon />
                <el-form class="zw-el-form" ref="formRef" :rules="rules" :model="form" label-width="140px">
                    <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="开户名称" prop="cardName">
                                <el-input maxlength="20" v-model.trim="form.cardName" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="开户银行" prop="bankName">
                                <el-input maxlength="20" v-model.trim="form.bankName" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="对公银行卡号" prop="cardNo">
                                <el-input maxlength="20" v-model.trim="form.cardNo" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="开户银行支行名称" prop="branchName">
                                <el-input maxlength="20" v-model.trim="form.branchName" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="开户银行所在省" prop="provinceName">
                                <el-input maxlength="20" v-model.trim="form.provinceName" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col>
                            <el-form-item label="开户银行所在市" prop="cityName">
                                <el-input maxlength="20" v-model.trim="form.cityName" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-col>
            <div class="footer">
                <div class="divider"></div>
                <el-button type="primary" @click="submitHandler">提交资料</el-button>
            </div>
        </el-row>
        <div class="updoc-status" v-if="status === '1'">
            <img class="tip-img" src="@/assets/imgs/sys/pay-updoc-valid.png" />
            <div class="tip-div">
                <span>系统已发起小额打款验证银行卡，请您注意查收您注册预留邮箱信息！</span>
                <span>注册邮箱：{{ storage.get('ZW-TENANT-LOGINNO').email }}</span>
                <span>并及时验证打款金额，回填验证！</span>
            </div>
        </div>
        <div class="updoc-status" v-if="status === '2'">
            <img class="tip-img" src="@/assets/imgs/sys/pay-updoc-success.png" />
            <div class="tip-div">
                <span>小额打款已成功，请您注意查收您注册预留邮箱信息！</span>
                <span>注册邮箱：{{ storage.get('ZW-TENANT-LOGINNO').email }}</span>
                <span
                    >如未收到邮件，<span class="send" @click="sendEmailHandler">请点击此处</span>重新发送或<span
                        class="send"
                        @click="openPageHandler"
                        >点此链接</span
                    >进行回填验证。如已经回填信息，请耐心等待审核。</span
                >
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import request from '@/request';
import { getRegExp } from '@/commons/utils';
import storage from '@/commons/storage';
import { ElMessage } from 'element-plus';
const props = defineProps({
    // 提交人是否是企业法人1-法人2-代理人
    status: {
        type: String,
        default: '3'
    }
});
const emit = defineEmits(['submit']);
const formRef = ref(null);
const email = ref('');
const form = reactive({
    /** 开户名称*/
    cardName: '',
    /** 开户银行*/
    bankName: '',
    /** 对公银行卡号*/
    cardNo: '',
    /** 开户银行支行名称*/
    branchName: '',
    /** 开户银行所在省*/
    provinceName: '',
    /** 开户银行所在市*/
    cityName: '',
    loginNo: storage.get('ZW-TENANT-LOGINNO').loginNo
});

const rules = reactive({
    cardName: [
        { required: true, message: '请输入开户名称', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '只能输入中文',
            trigger: 'blur'
        }
    ],
    bankName: [
        { required: true, message: '请输入开户银行', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '只能输入中文',
            trigger: 'blur'
        }
    ],
    cardNo: [
        { required: true, message: '请输入对公银行卡号', trigger: 'blur' },
        {
            pattern: getRegExp('bankcard'),
            message: '银行卡号格式不正确',
            trigger: 'blur'
        }
    ],
    branchName: [
        { required: true, message: '请输入开户银行支行名称', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '只能输入中文',
            trigger: 'blur'
        }
    ],
    provinceName: [
        { required: true, message: '请输入开户银行所在省', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '只能输入中文',
            trigger: 'blur'
        }
    ],
    cityName: [
        { required: true, message: '请输入开户银行所在市', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '只能输入中文',
            trigger: 'blur'
        }
    ]
});

/**
 *  用户手动发送邮件
 */
const sendEmailHandler = async () => {
    await request('baofuSendBindCardEmail', {
        loginNo: form.loginNo
    });
    ElMessage({
        type: 'success',
        message: '邮件发送成功!'
    });
};

/**
 * 用户跳转至回填验证页面
 */
const openPageHandler = async () => {
    const { data } = await request('baofuAuthFlagUrl', { loginNo: form.loginNo });
    data.url && window.open(data.url, '_blank');
};

const submitHandler = () => {
    formRef.value.validate(async valid => {
        if (valid) {
            await request('baofuBindCard', form);
            emit('submit');
        }
    });
};
</script>
<style lang="scss" scoped>
@import './style.scss';

.zw-form-item {
    width: 100%;
}
.zw-el-form {
    margin-top: 16px;
}

.footer {
    width: 100%;
    height: 120px;
    text-align: left;
    box-sizing: border-box;
}
.divider {
    height: 2px;
    background-color: #eaeaea;
    margin: 30px 0;
}
.updoc-status {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 100px;

    .tip-img {
        width: 80px;
        height: 80px;
    }

    .tip-div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 300;
        color: #33302d;
        line-height: 14px;
        margin-left: 30px;
        height: 80px;

        .send {
            color: #4a90e2;
            cursor: pointer;
            text-decoration-line: underline;
        }
    }
}
</style>
